<template>
  <div>
    <!-- 首页轮播图的结构 -->
    <Carousel />
    <!-- 首页搜索医院的表单区域 -->
    <Search />
    <!-- 底部展示医院的结构 -->
    <el-row gutter="20">
      <el-col :span="20">
        <!-- 等级子组件 -->
        <Level @getLevel="getLevel"/>
        <!--地区 -->
        <Region @getRegion="getRegion" />
        <!-- 展示医院的结构 -->
        <div class="hospital">
          <Card
            class="item"
            v-for="item in hasHospitalArr"
            :key="item.id"
            :hospitalInfo="item"
          />
        </div>
        <!-- <el-empty v-else description="暂无数据" /> -->
        <!-- 分页器 -->

        <el-pagination
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :background="true"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </el-col>
      <el-col :span="4">
         <Tip/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import {reqHospital} from '@/api/home/index'
import type {HospitalResponseData,HospitalData} from '@/api/home/type'
import Carousel from './carousel/index.vue'
import Level from './level/index.vue'
import Region from './region/index.vue'
import Tip from './tip/index.vue'
import Card from './card/index.vue'
import Search from './search/index.vue'
let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
let total = ref<number>(0)
let hasHospitalArr = ref<HospitalData[]>([])
//存储医院的等级相应数据
let hostype = ref<string>("");
//存储医院的地区
let districtCode = ref<string>("");
onMounted(()=>{
  getHospitalInfo()
})
const getHospitalInfo = async (page=1)=>{
  pageNo.value = page
  let res:HospitalResponseData = await reqHospital(pageNo.value,pageSize.value,hostype.value,districtCode.value)
  if(res.code==200){
    hasHospitalArr.value = res.data.content
    total.value = res.data.totalElements
  }
}
const sizeChange = ()=>{
  getHospitalInfo()
}
const currentChange = ()=>{
  getHospitalInfo()
}
// 接收子组件传来的数据
const getLevel = (level:string)=>{
  hostype.value = level
  getHospitalInfo()
}
const getRegion = (region:string)=>{
  districtCode.value = region
  getHospitalInfo()
}
</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0px;
  }
}
</style>
